<template>
  <div class="workout-plan-container">
    <el-card class="plan-card">
      <template #header>
        <div class="card-header">
          <h2>AI智能训练计划生成器</h2>
          <p class="subtitle">基于您的训练历史和目标，AI将为您生成个性化的训练计划</p>
        </div>
      </template>

      <!-- 加载状态 -->
      <div v-if="checkingPlan" class="loading-container">
        <el-icon class="loading-icon" :size="40">
          <Loading />
        </el-icon>
        <p>正在检查您的训练计划...</p>
      </div>

      <!-- 有现有计划时显示 -->
      <div v-else-if="hasExistingPlan && existingPlan" class="existing-plan-section">
        <el-divider content-position="left">
          <h3>您最近一次生成的AI训练计划</h3>
        </el-divider>

        <!-- 现有计划信息 -->
        <el-card class="plan-info-card" shadow="hover">
          <template #header>
            <div class="plan-header">
              <h4>计划信息</h4>
              <el-tag type="success">AI生成</el-tag>
            </div>
          </template>
          
          <el-descriptions :column="2" border>
            <el-descriptions-item label="计划ID">
              {{ existingPlan.id }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ formatDate(existingPlan.created_at) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- AI回复内容 -->
        <el-card class="ai-response-card" shadow="hover">
          <template #header>
            <h4>AI分析结果</h4>
          </template>
          
          <div class="ai-response-content">
            <pre>{{ existingPlan.description }}</pre>
          </div>
        </el-card>

        <!-- 保存的计划详情 -->
        <el-card v-if="existingPlan" class="saved-plan-card" shadow="hover">
          <template #header>
            <h4>保存的计划详情</h4>
          </template>
          
          <el-descriptions :column="1" border>
            <el-descriptions-item label="计划标题">
              {{ existingPlan.title }}
            </el-descriptions-item>
            <el-descriptions-item label="计划描述">
              {{ existingPlan.description }}
            </el-descriptions-item>
            <el-descriptions-item label="难度级别">
              <el-tag :type="getDifficultyType(existingPlan.difficulty)">
                {{ getDifficultyText(existingPlan.difficulty) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总时长">
              {{ formatDuration(existingPlan.total_duration) }}
            </el-descriptions-item>
            <el-descriptions-item label="休息时间">
              {{ existingPlan.rest_time }}秒
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button 
            type="primary" 
            :loading="loading" 
            @click="regeneratePlan"
            size="large"
          >
            <el-icon><StarFilled /></el-icon>
            重新生成训练计划
          </el-button>
          <el-button 
            type="success" 
            @click="hasExistingPlan = false"
            size="large"
          >
            生成新计划
          </el-button>
        </div>
      </div>

      <!-- 没有现有计划或选择生成新计划时显示表单 -->
      <div v-else class="form-section">
        <!-- 表单区域 -->
        <el-form 
          ref="formRef" 
          :model="formData" 
          :rules="rules" 
          label-width="120px"
          class="plan-form"
        >
        <!-- 训练目标 -->
        <el-form-item label="训练目标" prop="goals">
          <div class="goals-selection">
            <!-- 预设目标选择 -->
            <div class="preset-goals">
              <h4>选择您的训练目标：</h4>
              <el-radio-group v-model="selectedGoal" @change="updateGoals">
                <el-radio-button label="muscle_gain">增肌塑形</el-radio-button>
                <el-radio-button label="weight_loss">减脂瘦身</el-radio-button>
                <el-radio-button label="strength">提升力量</el-radio-button>
                <el-radio-button label="endurance">增强耐力</el-radio-button>
                <el-radio-button label="flexibility">改善柔韧性</el-radio-button>
                <el-radio-button label="recovery">康复训练</el-radio-button>
              </el-radio-group>
            </div>
            
            <!-- 自定义目标输入 -->
            <div class="custom-goals">
              <h4>或详细描述您的目标：</h4>
              <el-input
                v-model="formData.goals"
                type="textarea"
                :rows="3"
                placeholder="请详细描述您的训练目标，例如：增肌、减脂、提高力量、改善心肺功能等"
                maxlength="500"
                show-word-limit
                @input="clearSelectedGoal"
              />
            </div>
          </div>
        </el-form-item>

        <!-- 健身水平 -->
        <el-form-item label="健身水平" prop="fitness_level">
          <div class="fitness-level-selection">
            <el-radio-group v-model="formData.fitness_level" class="fitness-radio-group">
              <el-radio-button label="beginner">
                <div class="level-card">
                  <h4>初学者</h4>
                  <p>刚开始健身，需要基础指导</p>
                  <ul>
                    <li>• 健身经验少于6个月</li>
                    <li>• 需要学习基本动作</li>
                    <li>• 适合低强度训练</li>
                  </ul>
                </div>
              </el-radio-button>
              <el-radio-button label="intermediate">
                <div class="level-card">
                  <h4>中级</h4>
                  <p>有一定基础，可以挑战更高强度</p>
                  <ul>
                    <li>• 健身经验6个月-2年</li>
                    <li>• 掌握基本动作要领</li>
                    <li>• 可以尝试进阶训练</li>
                  </ul>
                </div>
              </el-radio-button>
              <el-radio-button label="advanced">
                <div class="level-card">
                  <h4>高级</h4>
                  <p>经验丰富，追求更高目标</p>
                  <ul>
                    <li>• 健身经验2年以上</li>
                    <li>• 动作标准，技术熟练</li>
                    <li>• 适合高强度训练</li>
                  </ul>
                </div>
              </el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>

        <!-- 训练时长 -->
        <el-form-item label="训练时长" prop="duration">
          <div class="duration-selection">
            <h4>选择您的训练时长：</h4>
            <el-radio-group v-model="selectedDuration" @change="updateDuration">
              <el-radio-button label="15">15分钟</el-radio-button>
              <el-radio-button label="30">30分钟</el-radio-button>
              <el-radio-button label="45">45分钟</el-radio-button>
              <el-radio-button label="60">60分钟</el-radio-button>
              <el-radio-button label="90">90分钟</el-radio-button>
              <el-radio-button label="120">120分钟</el-radio-button>
            </el-radio-group>
            
            <div class="custom-duration">
              <span>或自定义时长：</span>
              <el-input-number
                v-model="formData.duration"
                :min="15"
                :max="120"
                :step="5"
                placeholder="训练时长（分钟）"
                @change="clearSelectedDuration"
              />
              <span class="duration-hint">分钟</span>
            </div>
          </div>
        </el-form-item>

        <!-- 个人偏好 -->
        <el-form-item label="个人偏好" prop="preferences">
          <div class="preferences-selection">
            <h4>选择您的训练偏好：</h4>
            <el-checkbox-group v-model="selectedPreferences" @change="updatePreferences">
              <el-checkbox label="gym">健身房训练</el-checkbox>
              <el-checkbox label="home">在家训练</el-checkbox>
              <el-checkbox label="outdoor">户外训练</el-checkbox>
              <el-checkbox label="cardio">有氧运动</el-checkbox>
              <el-checkbox label="strength">力量训练</el-checkbox>
              <el-checkbox label="yoga">瑜伽/拉伸</el-checkbox>
              <el-checkbox label="hiit">高强度间歇训练</el-checkbox>
              <el-checkbox label="low_impact">低冲击训练</el-checkbox>
            </el-checkbox-group>
            
            <div class="custom-preferences">
              <h4>其他偏好或限制：</h4>
              <el-input
                v-model="formData.preferences"
                type="textarea"
                :rows="2"
                placeholder="请描述其他偏好或限制，例如：讨厌深蹲、膝盖有伤、希望重点训练上半身等"
                maxlength="300"
                show-word-limit
              />
            </div>
          </div>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            :loading="loading" 
            @click="generateNewPlan"
            size="large"
          >
            <el-icon><StarFilled /></el-icon>
            生成个性化训练计划
          </el-button>
          <el-button @click="resetForm" size="large">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 生成结果展示 -->
      <div v-if="planResult" class="result-section">
        <el-divider content-position="left">
          <h3>生成的训练计划</h3>
        </el-divider>

        <!-- 计划基本信息 -->
        <el-card class="plan-info-card" shadow="hover">
          <template #header>
            <div class="plan-header">
              <h4>计划信息</h4>
              <el-tag type="success" v-if="planResult.is_ai_generated">AI生成</el-tag>
            </div>
          </template>
          
          <el-descriptions :column="2" border>
            <el-descriptions-item label="计划ID">
              {{ planResult.plan_id }}
            </el-descriptions-item>
            <el-descriptions-item label="生成状态">
              <el-tag type="success">已保存到数据库</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- AI回复内容 -->
        <el-card class="ai-response-card" shadow="hover">
          <template #header>
            <h4>AI分析结果</h4>
          </template>
          
          <div class="ai-response-content">
            <pre>{{ planResult.response }}</pre>
          </div>
        </el-card>

        <!-- 保存的计划详情 -->
        <el-card v-if="planResult.saved_plan" class="saved-plan-card" shadow="hover">
          <template #header>
            <h4>保存的计划详情</h4>
          </template>
          
          <el-descriptions :column="1" border>
            <el-descriptions-item label="计划标题">
              {{ planResult.saved_plan.title }}
            </el-descriptions-item>
            <el-descriptions-item label="计划描述">
              {{ planResult.saved_plan.description }}
            </el-descriptions-item>
            <el-descriptions-item label="难度级别">
              <el-tag :type="getDifficultyType(planResult.saved_plan.difficulty)">
                {{ getDifficultyText(planResult.saved_plan.difficulty) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总时长">
              {{ formatDuration(planResult.saved_plan.total_duration) }}
            </el-descriptions-item>
            <el-descriptions-item label="休息时间">
              {{ planResult.saved_plan.rest_time }}秒
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>

      <!-- 使用说明 -->
      <el-card class="instruction-card" shadow="hover">
        <template #header>
          <h4>使用说明</h4>
        </template>
        
        <el-alert
          title="为什么要填写相关信息？"
          type="info"
          :closable="false"
          show-icon
        >
          <p><strong>训练目标</strong>：您是想要增肌、减脂、提升力量、增强耐力还是为了康复？不同的目标对应完全不同的训练方法和计划安排。</p>
          <p><strong>健身水平</strong>：一个给新手的深蹲计划和一个给资深训练者的计划在重量、组数、次数上会有天壤之别。错误匹配水平会导致无效训练或受伤风险。</p>
          <p><strong>训练时长</strong>：您每次能花多少时间锻炼？30分钟和90分钟的计划安排截然不同。系统需要根据这个时间来合理安排训练内容。</p>
          <p><strong>个人偏好</strong>：您喜欢在健身房还是在家用自重训练？喜欢跑步还是游泳？讨厌做某个动作？考虑到偏好能大大增加您坚持执行这个计划的可能性。</p>
        </el-alert>
        
        <el-alert
          title="功能特点"
          type="success"
          :closable="false"
          show-icon
          style="margin-top: 15px;"
        >
          <ul>
            <li>基于您的训练历史数据进行分析</li>
            <li>结合AI智能推荐最适合的训练动作</li>
            <li>根据您的目标和偏好生成个性化计划</li>
            <li>方便您后续查看和管理，要按照计划坚持下去哦！</li>
          </ul>
        </el-alert>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { StarFilled, Loading } from '@element-plus/icons-vue'
import { workoutAPI } from '@/api/index'

// 表单引用
const formRef = ref()

// 加载状态
const loading = ref(false)
const checkingPlan = ref(false)  // 检查现有计划的状态

// 表单数据
const formData = reactive({
  goals: '',
  fitness_level: 'intermediate',
  duration: 30,
  preferences: ''
})

// 选择状态
const selectedGoal = ref('')
const selectedDuration = ref('30')
const selectedPreferences = ref([])

// 生成结果
const planResult = ref(null)
const hasExistingPlan = ref(false)  // 是否有现有计划
const existingPlan = ref(null)  // 现有计划数据

// 目标映射
const goalMapping = {
  'muscle_gain': '增肌塑形，增加肌肉质量和力量，改善身体比例',
  'weight_loss': '减脂瘦身，燃烧脂肪，降低体重，改善体态',
  'strength': '提升力量，增强肌肉力量，提高运动表现',
  'endurance': '增强耐力，提高心肺功能，延长运动时间',
  'flexibility': '改善柔韧性，增加关节活动度，预防运动损伤',
  'recovery': '康复训练，恢复身体功能，缓解疼痛不适'
}

// 偏好映射
const preferenceMapping = {
  'gym': '健身房训练',
  'home': '在家训练',
  'outdoor': '户外训练',
  'cardio': '有氧运动',
  'strength': '力量训练',
  'yoga': '瑜伽/拉伸',
  'hiit': '高强度间歇训练',
  'low_impact': '低冲击训练'
}

// 表单验证规则
const rules = {
  goals: [
    { required: true, message: '请输入训练目标', trigger: 'blur' },
    { min: 10, message: '训练目标描述至少10个字符', trigger: 'blur' }
  ],
  fitness_level: [
    { required: true, message: '请选择健身水平', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请设置训练时长', trigger: 'blur' },
    { type: 'number', min: 15, max: 120, message: '训练时长应在15-120分钟之间', trigger: 'blur' }
  ]
}

// 生成训练计划
const generatePlan = async () => {
  try {
    // 表单验证
    await formRef.value.validate()
    
    loading.value = true
    
    // 调用API
    const response = await workoutAPI.generateWorkoutPlan(formData)
    
    console.log('API响应:', response)
    
    if (response.data && response.data.success) {
      planResult.value = response.data
      ElMessage.success('训练计划生成成功！')
      
      // 滚动到结果区域
      setTimeout(() => {
        const resultSection = document.querySelector('.result-section')
        if (resultSection) {
          resultSection.scrollIntoView({ behavior: 'smooth' })
        }
      }, 100)
    } else {
      console.error('API响应错误:', response)
      ElMessage.error(response.data?.error || response.error || '生成失败')
    }
  } catch (error) {
    console.error('生成训练计划失败:', error)
    ElMessage.error('生成训练计划失败，请重试')
  } finally {
    loading.value = false
  }
}

// 更新目标
const updateGoals = (value) => {
  formData.goals = goalMapping[value] || ''
}

// 清除选择的目标
const clearSelectedGoal = () => {
  if (formData.goals && !Object.values(goalMapping).includes(formData.goals)) {
    selectedGoal.value = ''
  }
}

// 更新时长
const updateDuration = (value) => {
  formData.duration = parseInt(value)
}

// 清除选择的时长
const clearSelectedDuration = () => {
  selectedDuration.value = ''
}

// 更新偏好
const updatePreferences = (values) => {
  const preferenceTexts = values.map(v => preferenceMapping[v]).filter(Boolean)
  formData.preferences = preferenceTexts.join('、')
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  planResult.value = null
  selectedGoal.value = ''
  selectedDuration.value = '30'
  selectedPreferences.value = []
  ElMessage.info('表单已重置')
}

// 检查用户是否有现有计划
const checkExistingPlan = async () => {
  try {
    checkingPlan.value = true
    const response = await workoutAPI.getUserLatestPlan()
    
    if (response.data && response.data.success) {
      if (response.data.has_plan) {
        hasExistingPlan.value = true
        existingPlan.value = response.data.plan
        planResult.value = {
          success: true,
          response: response.data.plan.description,
          saved_plan: response.data.plan,
          is_ai_generated: true,
          message: '显示您最近一次生成的AI训练计划'
        }
        ElMessage.success('已加载您最近一次生成的训练计划')
      } else {
        hasExistingPlan.value = false
        existingPlan.value = null
        ElMessage.info('您还没有生成过AI训练计划，请填写信息生成新计划')
      }
    } else {
      console.error('检查现有计划失败:', response)
      hasExistingPlan.value = false
    }
  } catch (error) {
    console.error('检查现有计划失败:', error)
    hasExistingPlan.value = false
    // 不显示错误消息，因为可能是未登录用户
  } finally {
    checkingPlan.value = false
  }
}

// 重新生成训练计划
const regeneratePlan = async () => {
  try {
    // 表单验证
    await formRef.value.validate()
    
    loading.value = true
    
    // 调用生成API，但标记为重新生成
    const regenerateData = { ...formData, is_regenerate: true }
    const response = await workoutAPI.generateWorkoutPlan(regenerateData)
    
    console.log('重新生成API响应:', response)
    
    if (response.data && response.data.success) {
      planResult.value = response.data
      hasExistingPlan.value = true
      existingPlan.value = response.data.saved_plan
      ElMessage.success('训练计划重新生成成功！')
      
      // 滚动到结果区域
      setTimeout(() => {
        const resultSection = document.querySelector('.result-section')
        if (resultSection) {
          resultSection.scrollIntoView({ behavior: 'smooth' })
        }
      }, 100)
    } else {
      console.error('重新生成API响应错误:', response)
      ElMessage.error(response.data?.error || response.error || '重新生成失败')
    }
  } catch (error) {
    console.error('重新生成训练计划失败:', error)
    ElMessage.error('重新生成训练计划失败，请重试')
  } finally {
    loading.value = false
  }
}

// 生成新计划（覆盖现有计划）
const generateNewPlan = async () => {
  try {
    // 表单验证
    await formRef.value.validate()
    
    loading.value = true
    
    // 调用API
    const response = await workoutAPI.generateWorkoutPlan(formData)
    
    console.log('API响应:', response)
    
    if (response.data && response.data.success) {
      planResult.value = response.data
      hasExistingPlan.value = true
      existingPlan.value = response.data.saved_plan
      ElMessage.success('训练计划生成成功！')
      
      // 滚动到结果区域
      setTimeout(() => {
        const resultSection = document.querySelector('.result-section')
        if (resultSection) {
          resultSection.scrollIntoView({ behavior: 'smooth' })
        }
      }, 100)
    } else {
      console.error('API响应错误:', response)
      ElMessage.error(response.data?.error || response.error || '生成失败')
    }
  } catch (error) {
    console.error('生成训练计划失败:', error)
    ElMessage.error('生成训练计划失败，请重试')
  } finally {
    loading.value = false
  }
}

// 组件挂载时检查用户现有计划
onMounted(() => {
  checkExistingPlan()
})

// 获取难度类型
const getDifficultyType = (difficulty) => {
  const types = {
    'beginner': 'success',
    'intermediate': 'warning',
    'advanced': 'danger'
  }
  return types[difficulty] || 'info'
}

// 获取难度文本
const getDifficultyText = (difficulty) => {
  const texts = {
    'beginner': '初学者',
    'intermediate': '中级',
    'advanced': '高级'
  }
  return texts[difficulty] || difficulty
}

// 格式化时长
const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}分${remainingSeconds}秒`
}

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}
</script>

<style scoped>
.workout-plan-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.plan-card {
  margin-bottom: 20px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.subtitle {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.plan-form {
  max-width: 800px;
  margin: 0 auto;
}

.duration-hint {
  margin-left: 10px;
  color: #909399;
}

/* 目标选择样式 */
.goals-selection {
  width: 100%;
}

.preset-goals {
  margin-bottom: 20px;
}

.preset-goals h4 {
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

.custom-goals h4 {
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

/* 健身水平选择样式 */
.fitness-level-selection {
  width: 100%;
}

.fitness-radio-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.fitness-radio-group .el-radio-button {
  flex: 1;
  min-width: 200px;
}

.level-card {
  padding: 15px;
  text-align: left;
  border-radius: 8px;
  background: #f8f9fa;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.level-card h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.level-card p {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 12px;
}

.level-card ul {
  margin: 0;
  padding-left: 15px;
  list-style: none;
}

.level-card li {
  margin-bottom: 5px;
  color: #909399;
  font-size: 12px;
}

/* 时长选择样式 */
.duration-selection {
  width: 100%;
}

.duration-selection h4 {
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

.duration-selection .el-radio-group {
  margin-bottom: 15px;
}

.custom-duration {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-duration span {
  color: #606266;
  font-size: 14px;
}

/* 偏好选择样式 */
.preferences-selection {
  width: 100%;
}

.preferences-selection h4 {
  margin-bottom: 10px;
  color: #303133;
  font-size: 14px;
}

.preferences-selection .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.custom-preferences {
  margin-top: 15px;
}

.result-section {
  margin-top: 30px;
}

.plan-info-card,
.ai-response-card,
.saved-plan-card,
.instruction-card {
  margin-bottom: 20px;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-header h4 {
  margin: 0;
}

.ai-response-content {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.ai-response-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.instruction-card ul {
  margin: 10px 0;
  padding-left: 20px;
}

.instruction-card li {
  margin-bottom: 5px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #606266;
  font-size: 16px;
}

.loading-icon {
  margin-bottom: 15px;
}

.existing-plan-section {
  margin-top: 30px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.form-section {
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .workout-plan-container {
    padding: 10px;
  }
  
  .plan-form {
    max-width: 100%;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .card-header h2 {
    font-size: 1.5rem;
  }
  
  .subtitle {
    font-size: 12px;
  }
  
  .ai-response-content {
    max-height: 300px;
    font-size: 12px;
  }
  
  /* 移动端健身水平选择 */
  .fitness-radio-group {
    flex-direction: column;
  }
  
  .fitness-radio-group .el-radio-button {
    min-width: auto;
  }
  
  .level-card {
    padding: 10px;
  }
  
  .level-card h4 {
    font-size: 14px;
  }
  
  .level-card p {
    font-size: 11px;
  }
  
  .level-card li {
    font-size: 11px;
  }
  
  /* 移动端偏好选择 */
  .preferences-selection .el-checkbox-group {
    flex-direction: column;
    gap: 8px;
  }
  
  /* 移动端时长选择 */
  .duration-selection .el-radio-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .custom-duration {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style>
